<template lang="">
  <div
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      background-color: #f5f5f5;
    "
  >
    <transition name="bounce">
      <div v-if="isImg" class="img-top">
        <a-spin>
          <template #icon> <icon-refresh :size="52" /></template>
        </a-spin>
      </div>
    </transition>
    <div class="main">
      <div style="width: 400px; height: 450px">
        <img src="../assets/img/gzlogo.png" style="width: 100%; height: 100%" alt="" />
      </div>
      <div class="right">
        <div class="longinText">
          <p v-show="loginText">密码登录</p>
          <p v-show="registerText">账号注册</p>
          <a-divider dashed margin="5px" />
        </div>
        <a-form :model="form" :style="{ width: '380px' }">
          <a-space direction="vertical" size="large">
            <a-form-item
              field="userName"
              :rules="[
                {
                  required: true,
                  message: '账号不能为空'
                }
              ]"
            >
              <a-input v-model="form.userName" placeholder="账号" />
            </a-form-item>
            <a-form-item
              field="password"
              :rules="[
                {
                  required: true,
                  message: '密码不能为空'
                }
              ]"
            >
              <a-input v-model="form.password" placeholder="密码" />
            </a-form-item>
            <a-form-item v-show="isProtocol">
              <a-checkbox style="font-size: 12px" v-model="isRead" :disabled="protocol"
                >我已阅读并同意
                <a-link
                  style="font-size: 12px"
                  href="http://xingfa.org/"
                  target="_blank"
                  @click="
                    () => {
                      this.protocol = false
                    }
                  "
                  >用户协议</a-link
                ></a-checkbox
              >
            </a-form-item>
            <a-form-item v-if="userLoginBtn">
              <a-button
                type="primary"
                size="large"
                long
                html-type="submit"
                @click="userLoginHandler"
                >登录</a-button
              >
            </a-form-item>
            <a-form-item v-if="adminLoginBtn">
              <a-button
                type="primary"
                size="large"
                long
                html-type="submit"
                @click="adminLoginHandler"
                >登录</a-button
              >
            </a-form-item>
            <a-form-item v-if="userRegBtn">
              <a-button type="primary" size="large" long html-type="submit" @click="userRegHandler"
                >立即注册</a-button
              >
            </a-form-item>
          </a-space>
        </a-form>
        <div class="regBtn" v-if="userRegText">
          <div>
            <span>没有账号? </span>
            <a-link
              style="font-size: 12px"
              @click="
                () => {
                  this.userLoginBtn = false
                  this.adminLoginBtn = false
                  this.userRegText = false
                  this.isUserShow = false
                  this.userRegBtn = true
                  this.userGoLogin = true
                  this.loginText = false
                  this.registerText = true
                  this.isProtocol = true
                }
              "
              >立即注册</a-link
            >
          </div>
          <div>
            <a-link
              style="font-size: 12px"
              @click="
                () => {
                  this.userLoginBtn = false
                  this.adminLoginBtn = true
                  this.userRegText = false
                  this.isUserShow = true
                }
              "
              >管理员登录</a-link
            >
          </div>
        </div>

        <div class="regzhongBtn" style="display: block" v-if="userGoLogin">
          <span>已有账号? </span>
          <a-link
            style="font-size: 12px"
            @click="
              () => {
                this.userLoginBtn = true
                this.adminLoginBtn = false
                this.userRegText = true
                this.isUserShow = false
                this.userRegBtn = false
                this.userGoLogin = false
                this.loginText = true
                this.registerText = false
                this.isProtocol = false
              }
            "
            >去登陆</a-link
          >
        </div>

        <div class="regzhongBtn" v-if="isUserShow">
          <a-link
            style="font-size: 12px"
            @click="
              () => {
                this.userLoginBtn = true
                this.adminLoginBtn = false
                this.userRegText = true
                this.isUserShow = false
              }
            "
            >我是用户</a-link
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue'
import { LoginAPI, UserRegAPI,UserLoginAPI } from '../api/users'
import { IconRefresh } from '@arco-design/web-vue/es/icon'
export default {
  setup() {
    const form = reactive({
      userName: '',
      password: ''
    })

    return {
      form
    }
  },
  components: { IconRefresh },
  data() {
    return {
      userLoginBtn: true,
      userRegText: true,
      adminLoginBtn: false,
      isUserShow: false,
      userRegBtn: false,
      userGoLogin: false,
      isImg: false,
      loginText: true,
      registerText: false,
      isRead: false,
      protocol: true,
      isProtocol: false
    }
  },
  methods: {
    adminLoginHandler() {
      console.log(this.form)
      if (this.form.userName && this.form.password) {
        this.isImg = true
        LoginAPI(this.form).then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success(res.errorMessage)
            localStorage.setItem('token', res.data)
            setTimeout(() => {
              this.isImg = false
              this.$router.push('/Wel')
            }, 700)
          } else {
            this.$message.error(res.errorMessage)
            this.isImg = false
          }
        })
      }
    },
    //用户登录
    userLoginHandler(){
      if (this.form.userName && this.form.password) {
        this.isImg = true
        UserLoginAPI(this.form).then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success(res.errorMessage)
            localStorage.setItem('token', res.data)
            setTimeout(() => {
              this.isImg = false
              this.$router.push('/hoomss')
            }, 700)
          } else {
            this.$message.error(res.errorMessage)
            this.isImg = false
          }
        })
      }
    },
    async userRegTry() {
      try {
        const res = await UserRegAPI({
          userName: this.form.userName,
          password: this.form.password,
          nickName: '',
          avatar: '',
          address: '',
          mobile: ''
        })
        return res
      } catch (error) {
        console.log(error)
      }
    },
    userRegHandler() {
      console.log(this.$refs.loginBtn)
      if (this.form.userName && this.form.password) {
        if (this.isRead) {
          this.userRegTry()
            .then((res) => {
              this.isImg = true
              if (res.success) {
                setTimeout(() => {
                  this.isImg = false
                  this.$message.success(res.errorMessage)
                  location.reload()
                }, 500)
              }
            })
            .catch((error) => {
              this.form.userName = ''
              this.form.password = ''
              setTimeout(() => {
                this.isImg = false
                this.$message.error('账号已存在')
              }, 500)
            })
        } else {
          this.$message.error('请勾选协议')
        }
      }
    }
  },
  updated() {
    this.form.userName = ''
    this.form.password = ''
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
}
.right {
  width: 450px;
  height: 450px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.right input {
  width: 300px;
  height: 30px;
  border-radius: 10px;
  border-color: rgb(178, 176, 176);
}
.longinText {
  width: 60px;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 200px;
}
.regBtn {
  font-size: 12px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-left: 80px;
}
.regzhongBtn {
  font-size: 12px;
  width: 300px;
  margin-top: 30px;
  margin-left: 80px;
}
.img-top {
  position: fixed;
  z-index: 999;
  background-color: rgba(219, 219, 219, 0.462);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
